<template>
  <d2-container class="page">
    <div slot="header">
      <span>首页</span>
      <transition></transition>
    </div>
    <el-button size="mini" @click="dialogVisible = true"
      >查看过期血液</el-button
    >
    <!--        -->
    <el-dialog
      :destroy-on-close="true"
      width="80%"
      :visible.sync="dialogVisible"
    >
      <d2-crud-x
        ref="d2Crud"
        v-bind="_crudProps"
        v-on="_crudListeners"
        @drop="handleOutdated"
      ></d2-crud-x>
    </el-dialog>
    <div class="chart-content">
      <div class="box">
        <div id="main" style="width: 500px; height: 500px"></div>
      </div>
      <div class="box">
        <div id="main1" style="width: 500px; height: 500px"></div>
      </div>
      <div class="box">
        <div id="main2" style="width: 500px; height: 500px"></div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import transition from '@/components/transition'
import api from './api'
export default {
  mixins: [d2CrudPlus.crud],
  components: { transition },
  data () {
    return {
      dialogVisible: false,
      repositoryReport: [],
      repositoryCharts: undefined,
      bloodReport: [],
      bloodCharts: undefined,
      typeReport: [],
      typeCharts: undefined
    }
  },
  async mounted () {
    await this.getRepositoryReport()
    await this.getBloodReport()
    await this.getTypeReport()
    this.initEcharts()
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) { return api.getOutdatedBlood(query) },
    // 初始化血液报表
    initBloodCharts () {
      if (this.bloodCharts) {
        this.bloodCharts.dispose()
      }
      this.bloodCharts = this.$echarts.init(document.getElementById('main1'))
      const option = {
        title: {
          text: '血型分类',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [{
          name: '血型',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.bloodReport
        }]
      }
      this.bloodCharts.setOption(option)
    },
    // 初始化仓库报表
    initRepositoryCharts () {
      if (this.repositoryCharts) {
        this.repositoryCharts.dispose()
      }
      this.repositoryCharts = this.$echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '仓储情况',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [{
          name: '仓库报表',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.repositoryReport
        }]
      }
      this.repositoryCharts.setOption(option)
    },
    // 初始化血型报表
    initTypeCharts () {
      const chartDom = document.getElementById('main2');
      this.typeCharts = this.$echarts.init(chartDom);
      const option = {
        title: {
          text: '血液容量报表',
          // subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '血型',
            type: 'pie',
            radius: '50%',
            data: this.typeReport,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && this.typeCharts.setOption(option)
    },
    // 初始化echarts
    initEcharts () {
      this.initRepositoryCharts()
      this.initBloodCharts()
      this.initTypeCharts()
    },
    // 获取仓库报表数据
    async getRepositoryReport () {
      const { data, code, message } = await api.getRepositoryReport()
      if (code === 0) {
        this.repositoryReport = data
      }
      else {
        this.$message.error(message)
      }
    },
    async getBloodReport () {
      const { data, code, message } = await api.getBloodReport()
      if (code === 0) {
        this.bloodReport = data
      } else {
        this.$message.error(message)
      }
    },
    async getTypeReport () {
      const { data, code, message } = await api.getTypeReport()
      if (code === 0) {
        this.typeReport = data
      } else {
        this.$message.error(message)
      }
    },
    async handleOutdated ($event) {
      console.log($event)
      // console.log('handle')
      this.$confirm('是否要丢弃该血液？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { code, message } = await api.deleteOutdatedBlood($event.row._id)
        if (code === 0) {
          this.$message.success('处理成功')
          this._OnCreated()
        } else {
          this.$message.error(message)
        }
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  .logo {
    width: 120px;
  }
  .btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    line-height: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    .btn-group__btn {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
      &.btn-group__btn--link {
        color: $color-primary;
      }
    }
  }
}
.chart-content {
  margin-top: 50px;
  display: flex;
}
</style>
